<template>
    <div class="goods-main" v-show="goodsData.length > 0">
         <div
           @click="() => goDeatil(jumpUrl(item.type))"
           class="part"
           v-for="item in goodsData"
         >
           <Goods :data-source="item" />
         </div>
   
         <div class="part" v-for="item of surplusDiv(goodsData.length, 4)"></div>
       </div>
   </template>
   <script setup lang="ts" name="">
   import { ref } from "vue"
   import {surplusDiv,publicUrl} from "@/utils/util";
   import { GoodsData } from "@/components/Goods/interface/index";
   import Popper from "vue3-popper";
   import {useRouter} from "vue-router";
   import Goods from "@/components/Goods/index.vue";
   
       const goodsData = ref<Array<GoodsData>>([
     {
       img: publicUrl("/images/Special164.jpg"),
       title: "男衬衫长袖固化款定制款款号男衬衫长袖固化款定制款款号",
       price: 59,
       pay_num: 300,
       company_name: "云裁定制服装有限公司",
       city: "广州",
       area: "增城",
       type: "spot",
     },
     {
       img: publicUrl("/images/Special164.jpg"),
       title: "mtm定制",
       price: 59,
       pay_num: 300,
       company_name: "云裁定制服装有限公司",
       city: "广州",
       area: "增城",
       type: "mtm",
     },
     {
       img: publicUrl("/images/fabric.jpg"),
       title: "某面料",
       price: 59,
       pay_num: 300,
       company_name: "云裁定制服装有限公司",
       city: "广州",
       area: "增城",
       type: "fabric",
     },
     {
       img: publicUrl("/images/fabric.jpg"),
       title: "某面料",
       price: 59,
       pay_num: 300,
       company_name: "云裁定制服装有限公司",
       city: "广州",
       area: "增城",
       type: "fabric",
     },
     {
       img: publicUrl("/images/fabric.jpg"),
       title: "某面料",
       price: 59,
       pay_num: 300,
       company_name: "云裁定制服装有限公司",
       city: "广州",
       area: "增城",
       type: "fabric",
     },
     
   ]);
   const router = useRouter();
   const menuShow = () => {};
   const jumpUrl = (
     type: "fabric" | "mtm" | "spot",
     id: number | undefined = undefined
   ): string => {
     switch (type) {
       case "fabric":
         return "/mtm/fabric/index/fabricDetail";
       case "mtm":
         return "/mtm/index/make";
       default:
         return "/mtm/spot/index/spotDetail";
     }
   }
   const goDeatil = (path:string) => {
     router.push({path});
   };
   
   const clrear = (close:any)=>{
       close();
   }
   </script>
   <style scoped lang="scss">
     @media screen and (min-width: $pc-min-width) {
       @import "./pc.scss";
     }
   </style>